<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- Stylesheets -->
	<!--<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>-->
	<link rel="stylesheet" href="docs.theme.min.css">
	<!-- Owl Stylesheets -->
	<link rel="stylesheet" href="owl.carousel.min.css">
	<!--<link rel="stylesheet" href="owl.theme.default.min.css">-->
	<!-- javascript -->
	<script src="jquery.min.js"></script>
	<script src="owl.carousel.js"></script>
</head>
<body>
<!--  Demos -->
<section id="demos">
	<div class="row">
		<div class="large-12 columns">
			<div class="owl-carousel">
				<div class="item">
					<h4>1</h4>
				</div>
				<div class="item">
					<h4>2</h4>
				</div>
				<div class="item">
					<h4>3</h4>
				</div>
				<div class="item">
					<h4>4</h4>
				</div>
				<div class="item">
					<h4>5</h4>
				</div>
				<div class="item">
					<h4>6</h4>
				</div>
				<div class="item">
					<h4>7</h4>
				</div>
				<div class="item">
					<h4>8</h4>
				</div>
				<div class="item">
					<h4>9</h4>
				</div>
				<div class="item">
					<h4>10</h4>
				</div>
				<div class="item">
					<h4>11</h4>
				</div>
				<div class="item">
					<h4>12</h4>
				</div>
			</div>
			<hr>
			<a id="left">Left</a> | <a id="right">Right</a> | <a id="add">Add</a>
			<hr>
			<a id="prev">Prev</a> | <a id="next">Next</a> | <a id="refresh">Refresh</a>
			<hr>
			<script>
				jQuery(document).ready(function ($)
				{
					var owl = $('.owl-carousel');
					owl.on('initialize.owl.carousel initialized.owl.carousel ' +
							'initialize.owl.carousel initialize.owl.carousel ' +
							'resize.owl.carousel resized.owl.carousel ' +
							'refresh.owl.carousel refreshed.owl.carousel ' +
							'update.owl.carousel updated.owl.carousel ' +
							'drag.owl.carousel dragged.owl.carousel ' +
							'translate.owl.carousel translated.owl.carousel ' +
							'to.owl.carousel changed.owl.carousel', function (e)
					{
						$('.' + e.type)
								.removeClass('secondary')
								.addClass('success');
						window.setTimeout(function ()
						{
							$('.' + e.type)
									.removeClass('success')
									.addClass('secondary');
						}, 500);
					});
					owl.owlCarousel({
//							loop: true,
//							nav: true,
						lazyLoad: true,
						margin: 10,
						video: true,
						responsive: {
							0: {
								items: 1
							},
							600: {
								items: 3
							},
							960: {
								items: 5
							},
							1200: {
								items: 6
							}
						}
					});
					$('#prev').on('click', function ()
					{
						owl.trigger('prev.owl.carousel');
					});
					$('#next').on('click', function ()
					{
						owl.trigger('next.owl.carousel');
					});
					$('#refresh').on('click', function ()
					{
						owl.trigger('refresh.owl.carousel');
					});
					$('#left').on('click', function ()
					{
						owl.trigger('to.owl.carousel', [0, 160]);
					});
					$('#right').on('click', function ()
					{
						owl.trigger('to.owl.carousel', [-1, 160]);
					});
					$('#add').on('click', function ()
					{
						var addItem = '<div class="owl-item">' +
								'<div class="item">' +
								'<h4>new</h4>' +
								'</div>' +
								'</div>';
						owl.trigger('add.owl.carousel', [$(addItem)])
								.trigger('refresh.owl.carousel')
//									.trigger('to.owl.carousel',[owl.data('owl-carousel').items().length,160]);
								.trigger('to.owl.carousel', [-1, 160]);
					});
				});
			</script>
		</div>
	</div>
</section>
</body>
</html>